<template>
    <el-container class="container">
        <el-aside :width="collapse ? '64px' : '230px'">
            <el-header style="cursor: pointer;">
                <div class="aside-title" @click="clickToIndex" style="color: #fff">管理系统</div>
            </el-header>
            <el-menu
                background-color="#333744"
                text-color="#fff"
                :unique-opened="true"
                :collapse="collapse"
                :collapse-transition="false"
                :router="true"
                active-text-color="#409EFF"
                :default-active="$route.path"
                v-if="first">
                <el-submenu
                    v-for="item in managementList"
                    :index="item.path">
                    <template slot="title">
                        <i class="el-icon-document"></i>
                        <span style="margin-left: 10px">{{ item.name }}</span>
                    </template>
                    <el-menu-item
                        v-for="child in item.children"
                        :index="child.path">
                        <template slot="title">
                            <span>{{ child.name }}</span>
                        </template>
                    </el-menu-item>
                </el-submenu>
                <el-menu-item
                    v-for="item in operateList"
                    :index="item.path"
                    @click="clickToIndex1(item.path)">
                    <template slot="title">
                        <i class="el-icon-document"></i>
                        <span style="margin-left: 10px">{{ item.name }}</span>
                    </template>
                </el-menu-item>
            </el-menu>
        </el-aside>
        <el-main>
            <el-header
                style="display: flex; justify-content: space-between; align-items: center;"
            >
                <div class="header-btn">
                    <el-button type="text" size="small" @click="loginOut" style="color: #fff">
                        退出登录
                    </el-button>
                </div>
            </el-header>
            <div class="title" v-if="$route.meta.breadCrumb">
                <el-breadcrumb separator="/" style="margin-left: 20px;">
                    <template v-for="item in $route.meta.breadCrumb">
                        <el-breadcrumb-item>{{ item }}</el-breadcrumb-item>
                    </template>
                </el-breadcrumb>
                <div style="font-size: 18px; font-weight: 500; margin: 20px 0 0 20px">
                    {{ $route.meta.breadCrumb[$route.meta.breadCrumb.length - 1] }}
                </div>
            </div>
            <el-main style="height: calc(100% - 100px); overflow-y: auto; margin: 20px">
                <router-view></router-view>
            </el-main>
        </el-main>
    </el-container>
</template>
<script>
import {exitLogin} from "@/admin/api/admin/index1/index";
import store from "@/admin/store";
import {mapGetters, mapMutations} from "vuex";

export default {
    data() {
        return {
            menus: store.state.menuList,
            collapse: false,
            isLoggedIn: false,
            operateList: [{
                id: 2,
                name: "运营方管理",
                path: "/admin/operator",
                children: []
            }],
            managementList: [
                {
                    id: 1,
                    name: "后台管理",
                    path: "/admin/backstage",
                    children: [
                        {id: 1, name: "运营账号管理", path: "/admin/backstage/account", children: []},
                        {id: 2, name: "权限组管理", path: "/admin/backstage/group", children: []},
                        {id: 3, name: "权限管理", path: "/admin/backstage/power", children: []}
                    ]
                },
                {
                    id: 2,
                    name: "系统设置",
                    path: "/admin/system",
                    children: [{id: 1, name: "字典管理", path: "/admin/system/dictionary", children: []}]
                }
            ],
            userData: {
                userId: 1,
                orgId: 1,
                orgName: "",
                username: "",
                nickname: "",
                roleName: "",
                permitId: "1,2,3",
            },
            activeName: 'first',
            first: true,
        };
    },

    computed: {
        ...mapGetters(["getMenuData"]),
    },
    methods: {
        clickToIndex() {
            this.$router.push("/index");
        },
        clickToIndex1(path) {
            this.$router.push(path);
        },
        loginOut() {
            this.$confirm("您确定退出登录吗?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    exitLogin().then((res) => {
                        if (res.code === 200) {
                            localStorage.removeItem("adminToken");
                            if (localStorage.getItem("adminToken") !== "") {
                                this.$router.push("/admin");
                                window.location.reload()
                                this.$message({message: "退出成功", type: "success"})
                            } else {
                                this.$message.error("退出失败")
                            }

                        }
                    });
                })
                .catch(() => {
                });
        },
    },
};
</script>
<style lang="less" scoped>
/* 选中的菜单项 */
.el-menu-item.is-active {
    background-color: #409EFF !important; /* 背景色 */
    color: #fff !important; /* 文字颜色 */
}

.title {
    width: 97%;
    height: 100px;
    background-color: #fff;
    border-radius: 5px;
    margin: 20px 0 0 20px;
}

/deep/ .el-breadcrumb {
    width: 400px;
    margin-top: 20px !important;

    /deep/ .el-tabs__nav {
        width: 400px;
        display: flex;
        justify-content: space-between;

        .el-tabs__item {
            width: 106px;
            height: 75px;
            text-align: center;
            line-height: 90px;
            font-size: 16px;
            font-width: 700;
            padding: 0;
            color: #fff;
        }

        .el-tabs__active-bar {
            width: 90px !important;
        }
    }
}

.el-breadcrumb__item {
    margin-top: 20px;
}

.container {
    height: 100%;
}

.el-aside {
    .el-header {
        background-color: #1e46af;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

img {
    vertical-align: middle;
}

span {
    vertical-align: middle;
    color: white;
    //margin-left: 20px;
    font-weight: 600;
}

.el-menu {
    height: calc(100% - 60px);
    background: #fff;
    border-right: none;

    div {
        li {
            span {
                margin-left: 20px;
            }
        }
    }
}

.el-main {
    background-color: #eaedf1;
    padding: 0;

    .el-header {
        background: linear-gradient(to right, #1d44ad, #2a99ff);
    }
}

.aside-title {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    overflow: hidden;
}

.header-btn {
    display: grid;
    align-items: center;
    justify-content: end;
    height: 100%;
    width: 100%;
}
</style>
